<!--
/*
 * 文件上传列表
 */
 使用方法
  <upload-list uploadFileId="uploadId" type="eipFile" v-model="imgList"></upload-list>

 -->
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
<template>
  <div>
    <upload-file v-if="!disable" :uploadId="uploadFileId" @getFiles="getFiles" :btn="{text: btnText}" :files="fileList"></upload-file>
    <el-table :data="fileList" list="" border highlight-current-row style="width: 100%;margin-top:20px">
      <el-table-column width="80px" align="center" label="序号" prop="$index">
        <template slot-scope="scope">
          {{scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="文档编号" prop="" v-if="type == 'cert'"></el-table-column>
      <el-table-column align="center" label="文件名" prop="fileName"></el-table-column>
      <!-- <el-table-column align="center" label="文件类型" prop="fileType">
        <template slot-scope="scope">
          {{scope.row.fileName.split('.')[1]}}
        </template>
      </el-table-column> -->
      <!--<el-table-column align="center" label="文件类型" prop="fileType"></el-table-column>-->
      <el-table-column align="center" label="文件大小">
        <template slot-scope="scope">
          {{scope.row.fileSize | showSize}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="上传人" prop="createUserName"></el-table-column>
      <el-table-column align="center" label="上传日期" prop="createTime"></el-table-column>
      <el-table-column align="center" label="备注" prop="remark" v-if="type.indexOf('remark') !== -1"></el-table-column>
      <el-table-column width="200px" align="center" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="download(scope.row.fileUrl)">下载</el-button>
          <el-button v-if="!disable" size="small" type="danger" @click="del(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>



<script>
export default {
  name: 'UploadList',
  components: {
  },
  props: {
    uploadFileId: {
      type: String,
      default: 'uploaf-file'
    },
    type: {
      type: String,
      default: ''
    },
    disable: {
      type: Boolean,
      default: false
    },
    btnText: {
      type: String,
      default: ''
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      baseUrl: process.env.BASE_FILE_URL,
      fileList: this.value
    }
  },
  watch: {
    value(val) {
      this.fileList = val;
    },
    fileList(val) {
      this.$emit('input', val);
    }
  },
  created() {

  },
  computed: {

  },
  methods: {
    getFiles(value) {
      this.fileList = value;
    },
    download(url) {
      window.open(this.baseUrl + '/' + url);
    },
    del(index) {
      this.$confirm('是否确认删除该文件？', '提示', {
        type: 'warning'
      }).then(() => {
        this.fileList.splice(index, 1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
}
</script>
